<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="js/ajax.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/jsx">

	var contextPath = "/rest/sso";
class DatagridBodyRow extends React.Component {
   constructor(props) {
      super(props);
  }
  render () {
	var dataMapCell = function(field,index){
		return (<div class="data-cell">{this.props.data[field.field]}</div>)
    }.bind(this);
     return (<div class="data-row">{
       this.props.fields.map(dataMapCell)
      }</div>)
  }
}
class Datagrid extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        datas:[],
	    fields:[],
		total:0,
		page:{start:0,offset:10}
      };
  }
  errorHandler(response){
    
  }
  componentDidMount() {
      var fieldHandler = function(response){
		this.setState({fields: response.datas});
	  }.bind(this);
      this.serverRequest = $.ajax({
          url:this.props.dataUrl,
          method:"GET",
		  headers:{
			"Content-Type":"application/json; charset=UTF-8"
		  },
		  data:JSON.stringify({}),
          success:fieldHandler,
		  error:this.errorHandler
      });
    this.refreshData();
  }
  refreshData(){
      var dataHandler = function(response){
		this.setState({datas: response.datas, total:response.total});
	  }.bind(this);

      this.serverRequest = $.ajax({
          url:this.props.dataUrl+"/queryByPage",
          method:"POST",
		  headers:{
			"Content-Type":"application/json; charset=UTF-8"
		  },
		  data:JSON.stringify({page:{start:this.state.page.start, offset:this.state.page.offset}, fields:this.state.fields.map(function(d){return d.field})}),
          success:dataHandler,
		  error:this.errorHandler
      });
  }
  onPageFirst(){
	this.setState({page:{start:0, offset:this.state.page.offset}});
	this.componentDidMount();
  }

  onPagePrev(){
	if(this.state.page.start != 0){
		var start = this.state.page.start;
		var offset = this.state.page.offset;
		var nstart = start - offset;
		nstart = nstart < 0 ? 0 : nstart;
		this.setState({page:{start:nstart, offset:this.state.page.offset}});
		this.componentDidMount();
	}
  }
  onPageNext(){
	if(this.state.page.start < this.state.total - this.state.page.offset){
		var nstart = this.state.page.start + this.state.page.offset;
		this.setState({page:{start:nstart, offset:this.state.page.offset}});
		this.componentDidMount();
	}
  }
  onPageLast(){
	if(this.state.page.start < this.state.total - this.state.page.offset){
		var nstart = this.state.total - this.state.total%this.state.page.offset;
		this.setState({page:{start:nstart, offset:this.state.page.offset}});
		componentDidMount();
	}
  }

  render () {
	var dataMapRow = function(data,index) {
        return (<DatagridBodyRow data={data} fields={this.state.fields}/>)
    };

    return (
      <div class="datagrid">
        <div class="title">{this.props.title}</div>
        <div class="headers">
		{
            this.state.fields.map((data,index) => {
               return (<div class="data-cell" for={data.field}>{data.i18n}</div>)
            })
        }
		</div>
		<div class="bodys">
		{
            this.state.datas.map(dataMapRow.bind(this))
        }
		</div>
		<div class="pagenation">
			<span class="des">total:{this.state.total}</span>
			<span>start:{this.state.page.start}</span>
			<span>offset:{this.state.page.offset}</span>
			<span class="btn" onClick={this.onPageFirst.bind(this)}>first</span>
			<span class="btn" onClick={this.onPagePrev.bind(this)}>prev</span>
			<span class="btn" onClick={this.onPageNext.bind(this)}>next</span>
			<span class="btn" onClick={this.onPageLast.bind(this)}>last</span>
		</div>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Datagrid title="Users" dataUrl="/rest/sso/user"/>,
  app
);
    </script>
    <style>
    	.datagrid{
    		border: 1px solid #ddd;
    		width:800px; 
    		height:600px;
    	    position: relative;
    	}
    	.datagrid .title{ border-bottom: 1px solid #ddd;}
    	.datagrid .headers{
    		display: table-row;
    	}
    	.datagrid .bodys .data-row{
    		display: table-row;
    		border: 1px solid #ddd;
    	}
    	.datagrid .data-cell{
    		display: table-cell;
    		border-left: 1px solid #ddd;
    		border-bottom: 1px solid #ddd;
    		width:100px;
    		max-width:100px;
    	}
    	.datagrid .pagenation{
    		bottom: 0px;
    		position: absolute;
    	}
    	.datagrid .pagenation .des{
    	    color: #aaa;
    		padding-right: 10px;
    	}
    	.datagrid .pagenation .btn{
   		    margin: 10px;
		    color: #FFF;
		    padding: 0px 5px;
		    border-radius: 2px;
		    background: #09f;
	        cursor: pointer;
            box-shadow: 0px 0px 2px #aaa
    	}
    </style>
  </body>
</html>